<!-- 查看商品信息 -->
<template>
  <div class="pageContent">
    <div class="shopTitle">
      <div class="shopListOne">商品列表</div>
      <div class="shopListThree">
        <el-button @click="getCheckShopDetail">刷新</el-button>
      </div>
    </div>
    <section id="main">
      <div class="head">
        <div>
          <span>商品详情</span>
        </div>
        <div class="shopListTwo">
          <el-button>
            <router-link to="/home/Shop/ShopList">返回</router-link>
          </el-button>
        </div>
      </div>
      <!-- 基本信息 -->
      <div class="info">
        <p>基本信息</p>

        <!-- 信息添加 -->
        <div>
          <el-form
            label-width="100px"
            class="demo-ruleForm"
            :model="shopDetailData"
          >
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">商品货号</span>
                </div>
                <el-input
                  v-model="shopDetailData.prod.articleNumber"
                ></el-input>
              </template>
            </el-form-item>
            <el-form-item prop="">
              <template>
                <div slot="label">
                  <span class="star">商品名称</span>
                </div>
                <el-input v-model="shopDetailData.prod.prodName"></el-input>
              </template>
            </el-form-item>
            <!-- <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">商品分类</span>
                </div>
              </template>
              <el-input></el-input>
              <el-input></el-input>
            </el-form-item> -->
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">支付方式</span>
                </div>
              </template>
              <el-input v-model="shopDetailData.prod.payType"></el-input>
            </el-form-item>
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">供应商</span>
                </div>
              </template>
              <el-input v-model="shopDetailData.prod.supplier"></el-input>
            </el-form-item>
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">品牌</span>
                </div>
              </template>
              <el-input v-model="shopDetailData.prod.brand"></el-input>
            </el-form-item>
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">封面图片</span>
                </div>
              </template>
              <!-- <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog> -->
              <div class="coverImages">
                <img :src="shopDetailData.prod.pic" />
              </div>
              <span class="hint"
                >（图片尺寸为200*200，单位像素，不超过10M，支持PNG、JPEG、JPG格式）</span
              >
            </el-form-item>
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">详情图片</span>
                </div>
              </template>
              <!-- <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog> -->
              <div class="detailImages">
                <div
                  v-for="(item) in shopDetailData.prod.imgs"
                  :key="item.fileId"
                >
                  <img :src="item.fileUrl" alt="" />
                </div>
              </div>
              <span class="hint"
                >（图片尺寸为400*400，单位像素，不超过10M，支持PNG、JPEG、JPG格式）</span
              >
            </el-form-item>
            <el-form-item label="是否包邮">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="销量">
              <el-input v-model="shopDetailData.prod.soldNum"></el-input>
            </el-form-item>
            <el-form-item label="服务保证">
              <el-checkbox v-model="checkedOne">正品保证</el-checkbox>
              <el-checkbox v-model="checkedTwo">里程抵扣兑换</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <!-- 商品报价 -->
        <div class="shopPrice">
          <div class="infoHead">
            <p>商品报价</p>
          </div>
          <el-table :data="shopDetailData.sku" border style="width: 100%">
            <el-table-column prop="kinds" label="商品类型" align="center">
            </el-table-column>
            <el-table-column prop="size" label="尺码" align="center">
            </el-table-column>
            <el-table-column prop="modelId" label="条形码" align="center">
            </el-table-column>
            <el-table-column prop="price" label="价格" align="center">
            </el-table-column>
            <el-table-column prop="oriPrice" label="市场价" align="center">
            </el-table-column>
            <el-table-column prop="actualStocks" label="库存" align="center">
            </el-table-column>
          </el-table>
        </div>
        <!-- 商品参数 -->
        <div class="shopPrice">
          <div class="infoHead">
            <p>商品参数</p>
          </div>
          <el-table
            :data="shopDetailData.prodParameters"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="parameterType"
              label="参数类型"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="parameterEntry"
              label="录入参数"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </section>
  </div>
</template>
  
  <script>
import { mapActions } from "vuex";
export default {
  name: "QueryShopInfo",
  data() {
    return {
      shopDetailData:{},
      formInline: {
        user: "",
        region: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      value: true, //包邮按钮
      checkedOne: false, //复选框
      checkedTwo: false, //复选框
      tableData: [
        {
          // 商品报价
          index: "",
          kinds: "",
          size: "",
          model_id: "",
          price: "",
          ori_price: "",
          actual_stocks: "",
          pic: "",
        },
      ],
      tableDataTwo: [
        {
          //商品参数
          serialNumber: "",
          parameterType: "",
          parameterEntry: "",
        },
      ],
    };
  },
  created() {
    this.getCheckShopDetail();
  },
  methods: {
    ...mapActions("shop", ["checkShopDetail"]),
    getCheckShopDetail() {
      let id = String(this.$route.query.id);
      console.log("id", id);
      this.checkShopDetail({ id }).then((res) => {
        console.log(res);
        this.shopDetailData = res;
        // this.shopDetailData.prod.imgs = JSON.parse(this.shopDetailData.prod.imgs);
        // console.log("res", this.shopDetailData.prod.imgs.fileUrl);
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  components: {},
};
</script>
  
  <style scoped>
::-webkit-scrollbar {
  display: none;
}
a {
  text-decoration: none;
  color: white;
}
.pageContent {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  /* overflow-y: scroll; */
}
.shopTitle {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f0f0f0;
}
.shopListOne {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}
.shopListTwo,.shopListThree {
  margin-right: 20px;
}
.shopListTwo button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}
.shopListThree button {
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}
/* 头部 */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
}
.left {
  height: 26px;
  font-size: 18px;
  font-weight: 400;
  border-left: 6px solid #1cb09a;
  padding-left: 10px;
  margin-left: 20px;
}
.right button {
  margin-right: 20px;
  background-color: #1cb09a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
}
/* 主体 */
#main {
  width: 96%;
  margin: auto;
}
.head {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f0f0f0;
  border: 1px solid #e4e4e4;
  margin-top: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head span {
  margin-left: 20px;
}
.info p {
  text-align: center;
  margin: 20px 0 30px 0;
  color: #999;
}
.info {
  margin-bottom: 50px;
  border: 1px solid #e4e4e4;
}
.el-input {
  width: 206px;
}
.star::before {
  color: red;
  content: "*";
}
.info > div form {
  margin: auto;
  width: 70%;
}
/* 提示信息的字体颜色 */
.hint {
  color: #999;
}
/* 商品报价 */
::v-deep .has-gutter tr th {
  background-color: #f5f5ff;
  text-align: center;
}
.info > button {
  display: block;
  margin: 30px auto;
}
.shopPrice {
  border: 1px solid #e4e4e4;
  margin-top: 30px;
}
.infoHead p {
  text-align: center;
}
.coverImages {
  width: 150px;
  height: 150px;
  border-radius: 4px;
}
.coverImages img {
  width: 150px;
  height: 150px;
}
.detailImages {
  overflow: hidden;
}
.detailImages div {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 20px;
  border-radius: 4px;
}
.detailImages img {
  width: 150px;
  height: 150px;
}
</style>